Why Awwwards?
The goal of this project is to scrape the site Awwwards. It is a website primarily focused on design, creativity and innovation for various platforms like web sites, mobile sites, AR/VR and other things on the internet. This is really interesting because we can see the design trends, and digital visuals that are considered “best” depending on different criteria like “Design”, “Usability”, “Content”, “Creativity”, “Mobile”, “Developer”, then there will be a “Total Rating” which will rank the site for the awards. Awwwards, is used as a design benchmark in the design community. Designers and non-designers use it to find inspirations for their own projects. You can also see the technologies people use as the it evolves to build their digital products like Figma, API’s, PHP, Shopify, various Javascripts, Laravel, Webpack, CSS, and others. You can also see the top Countries ranked, and you can check out which country/ agency is good in designing what kinds of interfaces. There aren’t a lot of datasets for design, and I intend to start with this to build my own datasets, with the goal of making digital design “smarter” and more “intuitive” by being powered by data.
Scope & Continuinty
For this project, I will be scraping the ALL of the yearly winners, monthly winners, daily winners, and nominees from Awwwards. The data will be dating from 2011 up to December 2021. The graphs and representations here will give a very basic overview of the dataset, but I intend to continue and perform extended analysis to analyze the trends and the evolution of digital design.
Scraping Methodology
- All the articles link for “Daily”, “Monthly” and “Yearly” winners, along with the “Nominated” articles were scrapped and their web links were saved in a separate “.txt” file.
- The “.txt” files were read to get the list of web links saved earlier, these links were used to scrape “Title”, “Description”, “Country”, “Author”,“Rating”, “Categories” and “Colors” for “Daily”, “Monthly” and “Yearly” winners. The scrapped data was saved as “csv” files.
- For “Nominees” the “Rating” was not available, colors and authors couldn’t be scrapped and rest was done as mentioned above.
head(NomineesData)## Link Type
## 1 https://www.awwwards.com/sites/deepmedia Nominees
## 2 https://www.awwwards.com/sites/rockwool-behind-the-facade Nominees
## 3 https://www.awwwards.com/sites/nest-cam-out-indoor-battery Nominees
## 4 https://www.awwwards.com/sites/la-puce-a-loreille Nominees
## 5 https://www.awwwards.com/sites/swwim Nominees
## 6 https://www.awwwards.com/sites/outhere-music Nominees
## Title Description By
## 1 DeepMedia Eidos Shanghai NA
## 2 ROCKWOOL Behind The Facade AU CLUB ALPIN NA
## 3 Nest Cam (out/indoor, battery) Ammolite - Restaurant NA
## 4 La puce \xe0 l'oreille Jai Dog Rescue NA
## 5 Swwim L\xe9o Parpeix \x97 Portfolio NA
## 6 Outhere Music Fundaci\xf3 MACBA NA
## Country Rating
## 1 Croatia NA
## 2 Denmark NA
## 3 United States NA
## 4 Canada NA
## 5 United Kingdom NA
## 6 Belgium NA
## Categories
## 1 Business & Corporate,Technology,Animation,Clean,Video,Wordpress,GSAP Animation,PHP,Highway.js,Locomotive Scroll
## 2 Architecture,Animation,Big Background Images
## 3 E-Commerce,Web & Interactive,Animation,Clean,Graphic design,Scrolling
## 4 Culture & Education,Music & Sound,Colorful,Flat Design,Transitions,Sound-Audio,UI design,GSAP Animation,Vue.js,Nuxt.js,GraphQL,Locomotive Scroll,Sass
## 5 Business & Corporate,Design Agencies,Promotional,Portfolio,Scrolling,Typography,Illustration,Microinteractions,Framer Motion,Figma,Next.js,Tailwind CSS,Sanity,Locomotive Scroll
## 6 Culture & Education,E-Commerce,Music & Sound,Animation,Clean,Graphic design,SEO,Typography,Content architecture,CSS,Drupal,Angular,Figma,Tailwind CSS,Swiper.js
## Colors
## 1 NA
## 2 NA
## 3 NA
## 4 NA
## 5 NA
## 6 NAhead(DayData)## Link Type Title
## 76 https://www.awwwards.com/sites/lemkus Day Lemkus
## 92 https://www.awwwards.com/sites/rupert-rothschild Day Rupert & Rothschild
## 278 https://www.awwwards.com/sites/studio-malvah Day Studio Malvah
## 650 https://www.awwwards.com/sites/parsons-branding Day Parsons Branding
## 924 https://www.awwwards.com/sites/wolf-whale Day Wolf&Whale
## 1168 https://www.awwwards.com/sites/makereign Day MakeReign
## Description
## 76 Lemkus is one of the leading retailers in limited edition sneakers and apparel in South Africa, which caters to sneaker enthusiasts.
## 92 An immersive digital brand home for the Rupert & Rothschild wine estate.
## 278 We\x92re just another branding/digital design studio connecting brands to people through craft and culture. New to the game, this is our first site to showcase our work, offerings and team
## 650 A brand strategy & design studio in the heart of\nCape Town that creates identities, products and brand\nexperiences for businesses who believe that what they do,\nmakes life better.
## 924 Wolf&Whale is a NY-based digital design consultancy for clients like WeWork, PAX Vaporizer, Walmart, and GoDaddy. We believe that great design is a force of nature.
## 1168 MakeReign is a Cape Town based digital design studio. We focus on delivering digital products that work beautifully, for brands locally and abroad.
## By Country Rating
## 76 Dash Digital South Africa 7.55
## 92 Studio Malvah South Africa 7.41
## 278 Studio Malvah South Africa 7.41
## 650 MakeReign South Africa 7.61
## 924 MakeReign South Africa 7.51
## 1168 MakeReign South Africa 7.61
## Categories
## 76 E-Commerce,Fashion,Web & Interactive,Navigation Menu,Typography,Interaction Design,About Page,Contact Page,Footer Design,GSAP Animation,React,Shopify,Javascript,Locomotive Scroll,Adobe XD
## 92 Food & Drink,Hotel / Restaurant,Web & Interactive,Parallax,Typography,Gallery,Storytelling,Interaction Design,Microinteractions,GSAP Animation,GLSL,Highway.js,Curtains.js,11ty
## 278 Design Agencies,Web & Interactive,Startups,Clean,Portfolio,Typography,Gallery,Gestures / Interaction,UI design,Node.js,GSAP Animation
## 650 Design Agencies,Clean,Portfolio,Scrolling,Unusual Navigation,Gallery,Interaction Design
## 924 Design Agencies,Mobile & Apps,Web & Interactive,Portfolio,Responsive Design,Web Fonts,UI design,About Page
## 1168 Design Agencies,Minimal,Navigation Menu,Portfolio,Responsive Design,Typography,Transitions,CSS3,WebGL,Apache,PHP
## Colors
## 76 Black,White,Yellow
## 92 Black,Yellow
## 278 Black,White,Yellow
## 650 Black,Orange,White
## 924 Black,Blue,White
## 1168 Red,Silver,Whitehead(MonthData)## Link Type
## 1 https://www.awwwards.com/sites/miranda-paper-portfolio Month
## 2 https://www.awwwards.com/sites/the-shift-1 Month
## 3 https://www.awwwards.com/sites/grids Month
## 4 https://www.awwwards.com/sites/2021-virtual-webbys Month
## 5 https://www.awwwards.com/sites/the-harmonic-state Month
## 6 https://www.awwwards.com/sites/aristide-portfolio-2021 Month
## Title
## 1 Miranda \x96\xa0Paper Portfolio
## 2 The Shift
## 3 Grids
## 4 2021 Virtual Webbys
## 5 The Harmonic State
## 6 Aristide \x96 Portfolio 2021
## Description
## 1 Amsterdam-based independent Designer & Developer with focus on Art Direction, Motion Design and Creative Development.
## 2 The Shift was created for things and people desiring a shift - a movement, a change - in business, organization, space, product, or service.
## 3 The educational project about grids which Obys uses every day with unusual storytelling.
## 4 Our virtual platform allowed viewers of the 2021 Webby Awards to watch the full show or cherry-pick individual elements, in an appropriately digital ode to the best of the internet.
## 5 Explore three webgl levels and learn how IBM transforms business operations from dissonance to harmony through Watson\x92s critical insights.
## 6 Portfolio of Aristide Benoist, freelance developer. Design by Jon Way, development and motion by Aristide Benoist.
## By Country Rating
## 1 Niccol\xf2 Miranda Netherlands 7.92
## 2 Garden Eight Japan 7.66
## 3 Os agency Ukraine 7.83
## 4 MediaMonks Netherlands 7.81
## 5 Active Theory United States 7.98
## 6 Aristide Benoist United States 8.01
## Categories
## 1 Design Agencies,Web & Interactive,Navigation Menu,Portfolio,Typography,Illustration,Copy design,Project Page,WebGL,GSAP Animation,Three.js,Webflow
## 2 Business & Corporate,Animation,Clean,WebGL,GSAP Animation,BARBA.js
## 3 Culture & Education,Web & Interactive,Experimental,Animation,Horizontal Layout,Minimal,Scrolling,Storytelling,Interaction Design,SVG,Figma,ReadyMag
## 4 Events,Web & Interactive,Colorful,Graphic design,Video,Filters and Effects,WebGL,PHP,Vue.js
## 5 Games & Entertainment,Clean,Sound-Audio,Storytelling,Filters and Effects,Interaction Design,WebGL
## 6 Promotional,Web & Interactive,Experimental,Graphic design,Portfolio,Interaction Design,WebGL,GLSL,Javascript
## Colors
## 1 Black,Brown
## 2 Black,Red,White
## 3 Black,White,Yellow
## 4 Blue,Red,Yellow
## 5 Blue,Green,White
## 6 Black,Whitehead(YearData)## Link Type
## 1 https://www.awwwards.com/sites/mammut-expedition-baikal Year
## 2 https://www.awwwards.com/sites/kode Year
## 3 https://www.awwwards.com/sites/dark-official-netflix-guide Year
## 4 https://www.awwwards.com/sites/synchronized-studio Year
## 5 https://www.awwwards.com/sites/pioneer-corn-revolutionized Year
## 6 https://www.awwwards.com/sites/bruno-simon-portfolio Year
## Title
## 1 Mammut Expedition Baikal
## 2 Kode Sports Club
## 3 Dark: Official Netflix Guide
## 4 Synchronized studio
## 5 Pioneer - Corn Revolutionized
## 6 Bruno Simon Portfolio
## Description
## 1 Follow Mammut Pro Team athlete Dani Arnold on his extreme expedition to the heart of Siberia and brave roaring winds, snow and ice.
## 2 KODE is a multi-disciplinary sports club opening in Q2 2022 in New Cairo. KODE has an holistic program for every aspect of an athlete\x92s development.
## 3 Dive into the who, what and wheres of Netflix\x92s mind-boggling time-travel saga DARK. Beautifully designed, the guide lets you explore the show\x92s characters, places and events.
## 4 Full-service creative studio crafting unparalleled digital experiences that bring strategic value and make our partners\x92 businesses thrive.
## 5 The behind the scenes process and cutting edge science of Pioneer corn told through the choreography of realtime 3D assets and animation.
## 6 Creative developer // Lead developer at Immersive Garden // Teacher at HETIC // Freelancer // WebGL lover
## By Country
## 1 Build in Amsterdam Netherlands
## 2 Merci-Michel France
## 3 MediaMonks Granny Henrik & Sofia Philipp Dietrich Michael Brake Netherlands
## 4 Zhenya Rynzhuk United States
## 5 Resn Netherlands
## 6 Bruno Simon France
## Rating
## 1 7.78
## 2 8.30
## 3 7.96
## 4 7.95
## 5 8.18
## 6 8.04
## Categories
## 1 E-Commerce,Fashion,Sports,Typography,Unusual Navigation,Gallery,Sound-Audio,Storytelling,Photo & Video,Contentful,next.js,CSS3,React
## 2 Sports,Animation,Fullscreen,3D,Three.js
## 3 Film & TV,Promotional,Web & Interactive,Transitions,Data Visualization,Responsive,Sound-Audio,Storytelling,UI design,HTML5,WebGL
## 4 Design Agencies,Promotional,Web & Interactive,Animation,Parallax,Scrolling,Typography,Transitions,Microinteractions,CSS,HTML5,WebGL,PixiJS,Vue.js,Nuxt.js
## 5 Business & Corporate,Web & Interactive,Scrolling,3D
## 6 Games & Entertainment,Web & Interactive,Animation,3D,Gestures / Interaction,Three.js
## Colors
## 1 Blue,Orange,White
## 2 Blue,Green,Pink
## 3 Black,Brown,Orange
## 4 Black,Silver,White
## 5 Black
## 6 Orange,YellowScraping Results
##Total Winners : 4,710 rows. Daily Winners : 4,526 rows. Monthly Winners : 147 rows. Yearly Winners : 37 rows.
##Nominees : 10,140 rows.
##Total Scraped : 14,850 rows.
Scraped Details
For Winners: Title, Description, Country, Author, Rating, Categories, Colors, Technologies, Industry, Tags, Rating For Nominees: Title, Description, Country, Author, Rating, Technologies, Industry, Tags
Data Visualization
plot_ly(NomineesData, x = ~Country, type = "histogram", color = ~Country)%>%
layout(title = 'Frequency Plot: Country wise Nominees')The United States has the most nominations with 2400 followed by the United Kingdom at 1087.
plot_ly(DayData, x = ~Country, type = "histogram", color = ~Country)%>%
layout(title = 'Frequency Plot: Country wise Daily Winners')The United States has the most “Daily Winners” articles. France comes at second while UK stands at third position.
plot_ly(MonthData, x = ~Country, type = "histogram", color = ~Country)%>%
layout(title = 'Frequency Plot: Country wise Monthly Winners')Here again the US is the clear winner followed by France; however, Netherlands have displaced the UK at the third spot.
plot_ly(YearData, x = ~Country, type = "histogram", color = ~Country)%>%
layout(title = 'Frequency Plot: Country wise Yearly Winners')France and Netherlands are the joint winners followed by the US and Denmark respectively.
plot_ly(DayData, x = ~Rating, type = "histogram")%>%
layout(title = 'Histogram: Daily Winners Rating')The rating spread shows normal distribution with mean lying somewhere at 7.3.
plot_ly(MonthData, x = ~Rating, type = "histogram")%>%
layout(title = 'Histogram: Monthly Winners Rating')The mean and spread of the monthly winners spread has moved towards higher ratings compared to the daily winners.
plot_ly(YearData, x = ~Rating, type = "histogram")%>%
layout(title = 'Histogram: Yearly Winners Rating')The spread of yearly winners rating is the least of all three and its mean lies around 8.0.